<template>
	<view class="content">
		<view class="biejing">
			<image class="image" :src="get_img+bgFunc()"></image>
			<!-- <image class="image" :src="get_img+sys.sys_background"></image> -->
		</view>
		<view style="margin: 30rpx 80rpx 20rpx 89rpx;width: 580rpx;padding-top: 60rpx;"></view>
		<view class="infor">
			<view class="infor2">
				<view style="padding:40rpx 0 0 80rpx">
					<u--image :src="user.avatar" width="130rpx" height="130rpx" shape="circle">
					</u--image>
				</view>
			</view>
			<view class="infor2" style="padding:45rpx 0 0 20rpx;color: #fff;">
				<p>{{user.nickname||"未登录"}}</p>
				<br>
				<br>
				<p v-if="user.phone">{{user.phone}}</p>
			</view>
			<view class="infor2">
				<view style="float: right;padding:20rpx 20rpx 0 0;color: #fff;">
					<u-icon name="setting-fill" size="25px" color="#fff"></u-icon>

				</view>
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="nav_data">
			<u-row justify="space-around">
				<u-col span="3">
					<view class="nav_data_a">
						<view class="nav_data_c">{{user.balance||0}}元</view>
						<view class="nav_data_b">红包</view>
					</view>
				</u-col>
				<u-col span="3">
					<view class="nav_data_a">
						<view class="nav_data_c">{{user.egg||0}}个</view>
						<view class="nav_data_b">鸡蛋</view>

					</view>
				</u-col>
				<u-col span="3">
					<view class="nav_data_a">
						<view class="nav_data_c">{{user.food||0}}次</view>
						<view class="nav_data_b">饲料</view>

					</view>
				</u-col>
				<u-col span="3">
					<view class="nav_data_a">
						<view class="nav_data_c">{{user.coupon||0}}元</view>
						<view class="nav_data_b">抵扣劵</view>
					</view>
				</u-col>
			</u-row>
		</view>

		<!-- #endif -->
		<!-- #ifdef MP-TOUTIAO -->
		<view class="nav_data">
			<u-row justify="space-around">
				
				<u-col span="3">
					<view class="nav_data_a">
						<view class="nav_data_c">{{user.balance||0}}元</view>
						<view class="nav_data_b">红包</view>
					</view>
				</u-col>
				<u-col span="3">
					<view class="nav_data_a">
						<view class="nav_data_c">{{user.egg||0}}个</view>
						<view class="nav_data_b">鸡蛋</view>
		
					</view>
				</u-col>
				<u-col span="3">
					<view class="nav_data_a">
						<view class="nav_data_c">{{user.food||0}}次</view>
						<view class="nav_data_b">饲料</view>
		
					</view>
				</u-col>
				<u-col span="3">
					<view class="nav_data_a">
						<view class="nav_data_c">{{user.coupon||0}}元</view>
						<view class="nav_data_b">抵扣劵</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<!-- #endif -->
		<u-line></u-line>
		<!-- 	<view class="infor1">
			<view style="font-size: 35rpx;padding: 15rpx 0 0 15rpx;">我的服务</view>
			<view>
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(listItem,listIndex) in nav" :key="listIndex" v-if="listItem.type==2"
						@click="goDetail(listItem)">
						<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="get_img+listItem.icon" :size="22"></u-icon>
						<text class="grid-text">{{listItem.name}}</text>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>
		</view> -->
		<Auth :is_auth="user.nickname==''" @send="get_infor"></Auth>
		<view>
			<view class="big">
				<view class="service">我的服务</view>
				<u-cell-group v-for="(listItem,listIndex) in nav" :key="listIndex" v-if="listItem.type==2">
					<u-cell :icon="get_img+listItem.icon" :title="listItem.name" isLink size="large"
						@click="goDetail(listItem)"></u-cell>
				</u-cell-group>
				<!-- 	<u-cell-group>
					<u-cell  title="夕阳无限好" arrow-direction="down">
						<u-icon slot="icon" size="32" name="search"></u-icon>
						<u-badge count="99" :absolute="false" slot="right-icon"></u-badge>
						<u-switch slot="right-icon" v-model="checked"></u-switch>
					</u-cell>
					<u-cell icon="setting-fill" title="只是近黄昏"></u-cell>
				</u-cell-group> -->
				<!-- <view class="service_k" v-for="(listItem,listIndex) in nav" :key="listIndex" v-if="listItem.type==2" @click="goDetail(listItem)">
					<view class="_a">
						<view class="service_icon">
							<u-icon :name="get_img+listItem.icon" :size="22"></u-icon>
						</view>
						<view class="service_name">
							<view>{{listItem.name}}</view>
						</view>
					</view>
					<view class="service_icons">
						<u-icon name="arrow-right" size="35rpx" color="#000"></u-icon>
					</view>
				</view> -->
			</view>
		</view>
		<view>

		</view>


		<!-- #ifdef MP-KUAISHOU -->
		<view>
			<view class="biejing">

				<image class="image" src="../../components/wx_logo.png"></image>
				<!-- <image class="image" :src="get_img+sys.sys_background"></image> -->
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	var _self
	import Auth from '../../components/xcx_auth.vue'
	export default {
		components: {
			Auth
		},
		data() {
			return {
				user: {},
				nav: [],
				get_img: this.$get_img,
				sys: {},

			}
		},
		onShow() {
			this.get_infor()
		},
		onLoad() {
			_self = this
			_self.sys = uni.getStorageSync("sys")
			this.user = uni.getStorageSync("infor")
			this.get_nav()
		},
		methods: {
			get_nav() {
				let that = this
				this.$model.get("user/common/get_nav").then(res => {
					if (res.code == 200) {
						that.nav = res.data
					}
				})
			},
			bgFunc() {
				return this.sys.my_nav_bg != '' ? this.sys.my_nav_bg : this.sys.sys_background
			},
			goDetail(item) {
				if (item.jump_type == 0) {
					uni.setStorageSync("article", item.article)
					uni.navigateTo({
						url: "../list/list?type=article"
					})
				}

				if (item.jump_type == 1) {
					uni.navigateTo({
						url: "../house/house?id=" + item.id
					})
				}

				if (item.jump_type == 2) {
					uni.navigateTo({
						url: item.value
					})
				}
			},
			click(name) {
				this.$refs.uToast.success(`点击了第${name}个`)
			},
			get_infor() {
				let that = this
				this.$model.get("user/get_infor").then(res => {
					if (res.code == 200) {
						uni.setStorageSync("infor", res.data)
						that.user = res.data
					}
				})
			}
		}
	}
</script>

<style>
	.image {
		width: 100vw;
		height: 300rpx;
		z-index: -1;
		position: absolute;
	}
	 /* #ifdef MP-WEIXIN */
	.nav_data {
		width: 700rpx;
		margin-left: 25rpx;
		margin-bottom: 40rpx;
		border-radius: 10rpx;
		box-shadow: 0rpx 0rpx 10rpx 2rpx #EBEBEB;
	}

	.nav_data_a {
		margin-left: 45rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;

	}

	.nav_data_b {
		margin-top: 5rpx;
		color: #000;
	}

	.nav_data_c {
		color: #000;
		width: 150rpx;
	}
	 /* #endif */
	
	
	 /* #ifdef MP-TOUTIAO */
	.nav_data {
		width: 700rpx;
		margin-left: 25rpx;
		margin-bottom: 40rpx;
		border-radius: 10rpx;
		box-shadow: 0rpx 0rpx 10rpx 2rpx #EBEBEB;
	}
	
	.nav_data_a {
		width: 130rpx;
		margin-left: 45rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	
	}
	
	.nav_data_b {
		margin-top: 5rpx;
		color: #000;
		width: 120rpx;
		font-size: 31rpx;
	}
	
	.nav_data_c {
		color: #000;
		width: 160rpx;
		font-size: 31rpx;
	}
	 /* #endif */
	.big {
		width: 700rpx;
		height: auto;
		margin-left: 25rpx;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 10rpx 2rpx #EBEBEB;
	}

	.service {
		font-size: 33rpx;
		padding: 15rpx 0 25rpx 25rpx;
	}

	.service_k {
		margin: 0rpx 0 15rpx 35rpx;
		width: 650rpx;
		height: 60rpx;
		font-size: 30rpx;
	}

	._a {
		width: 300rpx;
		padding-top: 10rpx;
		float: left;
	}

	.service_icon {
		float: left;
	}

	.service_name {
		float: right;
		margin-right: 120rpx;
		width: 120rpx;
		font-size: 28rpx;
	}

	.service_icons {
		float: right;
		margin: 8rpx 10rpx 10rpx 10rpx;
	}

	/* #ifdef MP-KUAISHOU */


	/* #endif */

	.infor {
		/* background-color: rgba(255, 255, 255, .5); */
		margin-bottom: 90rpx;
		/* width: 600rpx;
		height: 200rpx; */
		border-radius: 25rpx;
		display: flex;
	}

	.infor2 {
		flex: 1;
	}

	/* .infor1 {
		background-color: rgba(255, 255, 255, .5);
		margin: 80rpx 100rpx 50rpx;
		width: 600rpx;
		border-radius: 25rpx;
	} */

	.grid-text {
		font-size: 20rpx;
		color: black;
		padding: 10rpx 0 20rpx 0rpx;
		box-sizing: border-box;
	}
</style>
